<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双向数据绑定</title>
    <script src="../js/vue.js"></script>
</head>
<body>

<!--
        单向数据流
        v-bind    data中的数据可以影响页面表单数据的渲染  表单中的数据不会影响  data中的值

        双向数据绑定
        v-model  一般使用在 表单控件中 input
        页面中的数据改变会直接影响  data中的值  data中的值改变页面也会重新渲染

-->
<div id="app">

    <form>
        <p><input type="text" name="username" placeholder="请输入用户名"   v-model="uname"></p>
        <p><input type="text" name="password" placeholder="请输入密码" v-model="pwd" ></p>
        <p><input type="button" value="立即登录" @click="login"></p>
    </form>


    <form>
        <p><input type="text" name="username" placeholder="请输入用户名"    v-model="username"></p>
        <p><input type="text" name="password" placeholder="请输入密码"      v-model="password"></p>
        <p><input type="button" value="立即修改" @click="edit"></p>
    </form>

<!--    <form>-->
<!--        <p><input type="text" name="username" placeholder="请输入用户名"    v-bind:value="username"></p>-->
<!--        <p><input type="text" name="password" placeholder="请输入密码"      v-bind:value="password"></p>-->
<!--        <p><input type="button" value="立即修改" @click="edit"></p>-->
<!--    </form>-->

</div>

<script>

    const vm = new Vue({
        el:'#app',
        data:{
            username:'tom',
            password:"123456",
            uname:"",
            pwd:''
        },
        methods:{
            login(){
                //  发送异步请求   username  password
                //  layui  form.on("submit(lay-filter)",function(data){ data.field})  form.val("lay-filter",{})

                console.log("uname = "+this.uname)
                console.log("pwd = "+this.pwd)
            },
            edit(){
                console.log("username = "+this.username)
                console.log("password = "+this.password)
            }
        }
    })
</script>

</body>
</html>
